<Steps Active="index" IsNarrow IsMedium IsCentered HasContentCentered>
    <StepsSegment>
        <StepsMarker href="#">
            <Icon IconClass="fa fa-shopping-cart"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">Shopping Cart</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker href="#">
            <Icon IconClass="fa fa-user"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">User Information</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment HasGaps>
        <StepsMarker Color="Color.Danger">
            <Icon IconClass="fa fa-usd"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">Payment</p>
        </StepsContent>
    </StepsSegment>
    <StepsSegment>
        <StepsMarker IsHollow>
            <Icon IconClass="fa fa-check"></Icon>
        </StepsMarker>
        <StepsContent>
            <p class="heading">Confirmation</p>
        </StepsContent>
    </StepsSegment>
</Steps>

<hr>

<Button @onclick="NextStep">下一步</Button>

@code{

    int index = 1;

    void NextStep()
    {
        if (index++ >= 3)
            index = 0;
    }

}